<%@ tag language="java" pageEncoding="UTF-8" body-content="empty" trimDirectiveWhitespaces="true" %>
<%@ attribute name="id" type="java.lang.String" required="true" description="id" %>
<%@ attribute name="ajaxAvailable" type="java.lang.String" required="true" description="ajaxAvailable" %>
<%@ attribute name="ajaxSelected" type="java.lang.String" required="false" description="ajaxSelected" %>
<%@ attribute name="name" type="java.lang.String" required="false" description="右边已选择的部分的表单name" %>
<%@ attribute name="className" type="java.lang.String" required="false" description="className" %>
<%@ attribute name="valueDefine" type="java.lang.String" required="true" description="valueDefine" %>
<%@ attribute name="textDefine" type="java.lang.String" required="true" description="textDefine" %>
<%@ attribute name="availableHeaderName" type="java.lang.String" required="false" description="左侧头部名称" %>
<%@ attribute name="selectedHeaderName" type="java.lang.String" required="false" description="右侧头部名称" %>
<%@ attribute name="showHeader" type="java.lang.Boolean" required="false" description="是否显示头部，默认不显示" %>

<table data-tag="mutiSelect" class="m-mutiselect ${className }" id='mutiSelect_${id }'>
	<tr hidden="hidden" data-element='header'>
		<td colspan="2">${availableHeaderName }</td>
		<td>${selectedHeaderName }</td>
	</tr>
	<tr data-element='body'>
		<td data-element="available"></td>
		<td data-element="handle"><button class='m-handle-btn' type='button' data-handle="all-to-right" onclick="javascript:void(0)">&gt;&gt;</button><button 
			 data-handle="one-to-right" onclick="javascript:void(0)" type='button' class='m-handle-btn'>&gt;</button>
		<button class='m-handle-btn' type='button' data-handle="one-to-left" onclick="javascript:void(0)">&lt;</button><button 
			 data-handle="all-to-left" onclick="javascript:void(0)" type='button' class='m-handle-btn'>&lt;&lt;</button></td>
		<td data-element="selected"></td>
	</tr>
	<tr data-element="footer" hidden="hidden">
		<td colspan="3"></td>
	</tr>
</table>

<script type="text/javascript">
(function() {
	TagSupport.mutiSelect({
		'id':"${id}", 'ajaxAvailable':"${ajaxAvailable}", 'ajaxSelected':"${ajaxSelected}", 'name':"${name}", 'showHeader':"${showHeader}",
		 'className':"${className}", 'valueDefine':"${valueDefine}", 'textDefine':"${textDefine}"
	});
})();
</script>